<script setup>
import {addApi,updateApi} from '@/api/quality/text'
import { ref,getCurrentInstance, onMounted } from 'vue'
import { getListApi } from '../../../api/permission'
import { getWork } from '../../../api/work'
import { getSchema } from '../../../api/schema'

// 定义权限列表
const permissionList = ref([])
// 定义工单列表
const workList = ref([])
// 定义方案列表
const schemaList = ref([])

// 获取权限列表
const getPermissionList = async()=> {
  let result = await getListApi()
  permissionList.value = result.data  
}
// 获取工单列表
const getWorkList = async()=> {
  let result = await getWork()
  workList.value = result.data  
}
// 获取方案列表
const getSchemaList = async()=> {
  let result = await getSchema()
  schemaList.value = result.data  
}
onMounted(()=>{
  getPermissionList(),
  getWorkList(),
  getSchemaList()
})

// 定义表单对象
const userForm = ref({
  type:'',
  checkSchemaId:'',
  workNub:'',
  roleId:''
})


// 表单引用
const formRef = ref()
// 弹出框定义
const dialogVisible = ref(false)
const show = (val)=>{
  dialogVisible.value = (val)
}
const handleClose = ()=>{
  dialogVisible.value = false 
}
const instance = getCurrentInstance()
// 新增清空表单方法
const resetForm = () => {
  userForm.value = {
  type:'',
  checkSchemaId:'',
  workNub:'',
  roleId:''
  }}
// 新增修改实现
const editSubmit = async() =>{
  await formRef.value.validate()
  let result
  if(userForm.value.id){
    result = await updateApi(userForm.value)
  }else{
    result = await addApi(userForm.value)
  }
  dialogVisible.value = false
// 通知父组件
  instance.emit('search')
}
// 暴露方法
defineExpose({
 dialogVisible,
  show,
  userForm,
  resetForm
})

</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    title=""
    width="1200px"
    :before-close="handleClose"
  >
  <!-- 修改表单 -->
   <el-form 
      ref="formRef"
      :model="userForm" 
      :rules="rules"
      label-width="auto" 
      style="max-width: 1200px"
    >
    <el-row :gutter="10">
      <el-col :span="12">
        <!-- 添加 prop 属性 -->
        <el-form-item label="质检类型" prop="type">
          <el-select v-model="userForm.type" placeholder="类型">
        <el-option label="首检" value="1" />
        <el-option label="巡检" value="2" />
        <el-option label="末检" value="3" />
      </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <!-- 添加 prop 属性 -->
        <el-form-item label="检验方案" prop="type">
          <el-select v-model="userForm.checkSchemaId" placeholder="请选择">
       <el-option v-for= "schema in schemaList" 
       :key="schema.id"
       :label="schema.name"
       :value="schema.id"/>
      </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <!-- 添加 prop 属性 -->
        <el-form-item label="工单" prop="workNub">
          <el-select v-model="userForm.workNub" placeholder="请选择">
       <el-option v-for= "work in workList" 
       :key="work.id"
       :label="work.workNumb"
       :value="work.id"/>
      </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <!-- 添加 prop 属性 -->
        <el-form-item label="权限角色" prop="roleId">
          <el-select v-model="userForm.roleId" placeholder="请选择">
       <el-option v-for= "role in permissionList" 
       :key="role.id"
       :label="role.name"
       :value="role.id"/>
      </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item>
      <el-button type="primary" @click="editSubmit">保存</el-button>
      <el-button @click="dialogVisible=false">取消</el-button>
    </el-form-item>
   </el-form>
  </el-dialog>
</template>